<template>
  <div id="app">
    {{msg | handleStr}}
    <Hello :data="msg"></Hello>
    <div class="movies">
      <Movies v-for="item of movies.playlists" :key="item.title" :data="item" ></Movies>
    </div>
  </div>
</template>

<script>
import http from "../models/wyy"
// 导入包
// import axios from "axios"

// 引入组件
import Hello from "./components/hello"
import Movies from "./components/Movies"
export default {
  name:"http",
  components:{
    Movies,
    Hello
  },

  data(){
    return {
      msg:"hello world",
      arr:[
        {name:"html",id:1001},
        {name:"css",id:1002},
        {name:"js",id:1003},
      ],
      movies:{}
    }
  },
  async mounted(){
    this.movies = await http.httpHuayu();
    console.log(this.movies);
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.movies{
  width: max-content;
  margin: 0 auto ;
  display: grid;
  grid-template-columns:repeat(4,1fr);
  grid-gap: 20px;
}
</style>
